<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ez="http://java.sun.com/jsf/composite/demo"
	xmlns:p="http://primefaces.org/ui">

<ui:composition template="/templates/common.xhtml">

	<ui:define name="pageHeader">
			Nossas Compras
		</ui:define>

	<ui:define name="mainSection">
		<div class="twelve columns">
			<h:form id="invoiceForm">
				<p:panel>
					
					<!-- COMMANDS -->
					<p:commandButton value="Excluir" action="#{invoiceMB.delete()}"
						update="invoiceForm" />
						
					<p:tabView >
						<p:ajax event="tabChange" listener="#{invoiceMB.calculateSelectedInvoices()}" update="invoiceSelectedList" />
						<p:tab title="Notas">
							<!-- LIST -->	
							<p:dataTable value="#{invoiceMB.findAll()}" var="invoice"
								id="invoiceList" selection="#{invoiceMB.selectedInvoices}"
								rowKey="#{invoice.id}">
		
								<p:column selectionMode="multiple" style="width:2%" />
		
								<p:column headerText="Detalhe da Nota">
									<h:outputText value="#{invoice.details}" />
								</p:column>
								
								<p:column headerText="Pagador">
									<h:outputText value="#{invoice.payer.fullName}" />
								</p:column>
								
								<p:column headerText="Data">
									<h:outputText value="#{invoice.shoppingDate}" converter="DateConverter" />
								</p:column>
								
								<p:column headerText="Total">
									<h:outputText value="#{invoice.total}" />
								</p:column>
								
							</p:dataTable>
						</p:tab>
						
						<p:tab title="Calculo das Notas" id="calculateId">
							<!-- LIST -->	
							<p:panel>
							<p:dataTable value="#{invoiceMB.selectedInvoices}" var="invoice" id="invoiceSelectedList">
		
								<p:column headerText="Detalhe da Nota">
									<h:outputText value="#{invoice.details}" />
								</p:column>
								
								<p:column headerText="Pagador">
									<h:outputText value="#{invoice.payer.fullName}" />
								</p:column>
								
								<p:column headerText="Data" footerText="Total:">
									<h:outputText value="#{invoice.shoppingDate}" converter="DateConverter" />
								</p:column>
								
								<p:column headerText="Total" footerText="R$ #{invoiceMB.totalSelectedInvoices}">
									<h:outputText value="#{invoice.total}" />
								</p:column>
								
							</p:dataTable>
							</p:panel>
						</p:tab>
						</p:tabView>

				</p:panel>
				
				
				<!-- NEW invoice -->
				

				<p:panel id="newFormInvoice" rendered="#{invoiceMB.displayNewInvoiceForm}">
					<h3>Nova Compra</h3>
					
						<p:outputLabel value="Descrição da Nota" for="invoiceDescription" />
						<p:inputText id="invoiceDescription" value="#{invoiceMB.entity.details}" />
						
						<p:outputLabel value="Data da Compra" for="invoiceShoppingDate" />
						<p:inputMask value="#{invoiceMB.entity.shoppingDate}" id="invoiceShoppingDate" converter="DateConverter" pattern="dd/MM/yyyy" mask="99/99/9999"/>  
						
						<p:outputLabel value="Valor da Nota" for="invoiceValue" />
						<p:inputText id="invoiceValue" value="#{invoiceMB.entity.total}" />
					
						<p:dataTable value="#{invoiceMB.listSysUser}" var="user"
						selection="#{invoiceMB.selectedUser}" rowKey="#{user.id}" >

						<p:column selectionMode="single" style="width:2%" />

						<p:column headerText="Pagador">
							<h:outputText value="#{user.fullName}" />
						</p:column>

						<div style="clear: both" />
					</p:dataTable>
					<p:commandButton value="Salvar" action="#{invoiceMB.save()}"/>

				</p:panel>
				
			</h:form>
		</div>
	</ui:define>

</ui:composition>
</html>